<template>
  <div class="container">
    <h1>我是您的智能助手，你想查看什么信息？</h1>
    <div class="input-group">
      <input
        type="text"
        v-model="inputValue"
        placeholder="在这里输入..."
        @keyup.enter="handleSubmit"
      />
      <button @click="handleSubmit()">提交</button>
    </div>
  </div>
  <div ref="chartContainer" class="chart-container"></div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from "vue";
import { GetOrderStatisticsData, getDataReport } from "@/api/aiReport/report";
import { ElMessage } from "element-plus";
import * as echarts from "echarts";

const inputValue = ref("");
const chartContainer = ref(null);
const one = ref("目前系统商品销售情况怎样");
let chartInstance = null;

// 初始化图表
onMounted(() => {
  chartInstance = echarts.init(chartContainer.value);
  window.addEventListener("resize", resizeChart);
  // handleSubmit(one);
});

onBeforeUnmount(() => {
  window.removeEventListener("resize", resizeChart);
  chartInstance?.dispose();
});

const resizeChart = () => {
  chartInstance?.resize();
};

const handleSubmit = async () => {
  ElMessage.success("正在进行语义分析");
  const reponse = await GetOrderStatisticsData(inputValue.value);
  let answerToken = reponse.data.answerToken;
  let groupText = reponse.data.groupText;
  let countText = reponse.data.countText;
  ElMessage.success(
    "将为你以" + groupText + "进行分组,以" + countText + "进行统计,请稍后"
  );
  const { data } = await getDataReport(answerToken);
  ElMessage.success("正在生成结果");
  if (data?.xList && data?.yList) {
    updateChart(data.xList, data.yList);
  }
};
const updateChart = (xData, yData) => {
  const option = {
    tooltip: {
      trigger: "axis",
      axisPointer: { type: "shadow" },
    },
    xAxis: {
      type: "category",
      data: xData,
      axisLabel: { rotate: 30 },
    },
    yAxis: { type: "value" },
    series: [
      {
        name: "统计值",
        type: "bar",
        data: yData,
        itemStyle: {
          color: "#4285f4",
          borderRadius: [4, 4, 0, 0],
        },
        barWidth: "60%",
      },
    ],
  };
  chartInstance.setOption(option);
};
</script>

<style scoped>
.chart-container {
  width: 80%; /* 调整图表宽度 */
  height: 800px; /* 调整图表高度 */
  margin: 2rem auto; /* 居中显示 */
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.container {
  width: 50%;
  margin: 0 auto;
  padding: 2rem;
  text-align: center;
}

h1 {
  color: #333;
  margin-bottom: 2rem;
  font-size: 1.8rem;
}

.input-group {
  display: flex;
  border-radius: 25px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.input-group:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

input {
  flex: 1;
  padding: 0.8rem 1.2rem;
  border: none;
  font-size: 1rem;
  outline: none;
  background: #f8f9fa;
}

button {
  padding: 0 1.5rem;
  background: #4285f4;
  color: white;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  transition: background 0.3s;
}

button:hover {
  background: #3367d6;
}
</style>
